<template>
  <view class="z-model" v-if="isShowModel">
    <view class="z-model-center">
      <view class="z-model-center-header">
        <view class="z-model-center-header-type-header">
          <!--          <view-->
          <!--            v-for="(item, index) in list"-->
          <!--            @click="changeIndex(index)"-->
          <!--            class="hideText z-model-center-header-type-header-item"-->
          <!--            :class="{ 'z-model-center-header-type-header-item-action': index === showIndex }"-->
          <!--            :key="index"-->
          <!--            >{{ item.name }}</view-->
          <!--          >-->
          <view>
            <view class="hideText z-model-center-header-type-header-item" :class="isParent ? 'z-model-center-header-type-header-item-sc' : ''" @click="showParent">{{ text }}</view>
            <view class="hideText z-model-center-header-type-header-item" :class="!isParent ? 'z-model-center-header-type-header-item-sc' : ''">分类选择</view>
          </view>
          <image lazy-load class="close" src="../static/image/close.png" @click="closeSelect"></image>
        </view>
      </view>
      <view class="z-model-center-list" v-show="isParent">
        <view v-for="(row, index) in list" @click="changeIndex(index, row)" class="z-model-center-list-item" :key="index">{{ row.name }}</view>
      </view>
      <view class="z-model-center-list" v-show="!isParent">
        <view v-for="(row, index) in list[showIndex].list" @click="changType(row)" class="z-model-center-list-item" :key="index">{{ row.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getClassifyType } from '../service/login'

export default {
  data() {
    return {
      isShowModel: false,
      list: [],
      showIndex: 0,
      tabIndex: 0,
      isParent: true,
      text: '分类选择'
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isShow(e) {
      this.isShowModel = e
    }
  },
  mounted() {
    this.initType()
  },
  methods: {
    changeIndex(index, row) {
      this.showIndex = index
      this.isParent = false
      this.text = row.name
      this.tabIndex = 1
    },
    showParent() {
      this.tabIndex = 0
      this.isParent = true
    },
    changType(value = {}) {
      if (value.id) {
        const obj = {
          isShow: false,
          value: value
        }
        this.$emit('selectData', obj)
      } else {
        const obj = {
          isShow: false
        }
        this.$emit('selectData', obj)
      }
    },
    initType() {
      getClassifyType()
        .then((res) => {
          try {
            this.list = res
          } catch (e) {
            // error
          }
        })
        .catch(() => {})
    },
    closeSelect() {
      this.changType()
    }
  }
}
</script>

<style scoped lang="scss">
.z-model {
  .hideText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  .z-model-center {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    height: 950rpx;
    .z-model-center-list {
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      color: rgba(21, 44, 98, 1);
      letter-spacing: 2px;
      margin-top: 30rpx;
      overflow-y: auto;
      height: calc(100% - 160rpx);
      .z-model-center-list-item {
        padding: 10rpx 40rpx;
      }
    }
    .z-model-center-list-item-action {
      color: rgba(55, 126, 251, 1);
    }
    .z-model-center-header {
      display: flex;
      height: 120rpx;
      justify-content: space-between;
      border-bottom: 1px solid #ede9e9;
      align-items: center;
      margin: 0 40rpx;
      .z-model-center-header-type-header {
        display: flex;
        overflow-y: auto;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        > view {
          display: flex;
          align-items: center;
        }
        .z-model-center-header-type-header-item {
          padding: 40rpx 40rpx 40rpx 0;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #9a9ba3;
          letter-spacing: 2px;
        }
        .z-model-center-header-type-header-item-sc {
          color: #152c62;
        }
        .close {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
}
</style>
